<template>
    <el-dialog id="edit-resume"
               top="5vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="resume"></icon>
                简历 {{ resume.uid }}
            </span>
        </div>
        <!-- 基本信息 -->
        <el-divider content-position="left">
            <div class="font-s16">
                <icon name="edit"></icon>
                <span class="ml-5 text-primary">编辑基本信息</span>
            </div>
        </el-divider>
        <el-descriptions size="medium"
                         label-class-name="detail-label"
                         border
                         :column="2">
            <!-- 姓名 -->
            <el-descriptions-item label="姓名：">
                <el-input v-model="model.name" size="medium" maxlength="15" placeholder="姓名"></el-input>
            </el-descriptions-item>
            <!-- 出生日期 -->
            <el-descriptions-item label="出生日期：">
                <el-date-picker v-model="model.birthday" size="medium" type="date" placeholder="出生日期">
                </el-date-picker>
            </el-descriptions-item>
            <!-- 性别 -->
            <el-descriptions-item label="性别：">
                <el-select v-model="model.sex" value-key="男" size="medium" placeholder="性别">
                    <el-option v-for="item in genderOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 婚姻 -->
            <el-descriptions-item label="婚姻：">
                <el-select v-model="model.marital" size="medium" placeholder="婚姻">
                    <el-option v-for="item in maritalOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 身高 -->
            <el-descriptions-item label="身高：">
                <el-input v-model="model.height" size="medium" type="number" maxlength="3" placeholder="身高"></el-input>
            </el-descriptions-item>
            <!-- 学历 -->
            <el-descriptions-item label="学历">
                <el-select v-model="model.education" size="medium" placeholder="学历">
                    <el-option v-for="item in educationOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 户籍 -->
            <el-descriptions-item label="户籍：">
                <el-cascader v-model="model.census" size="medium" :options="areaOptions"></el-cascader>
            </el-descriptions-item>
            <!-- 经验 -->
            <el-descriptions-item label="工作经验：">
                <el-select v-model="model.work_year" size="medium" placeholder="经验">
                    <el-option v-for="item in workYearOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 居住地 -->
            <el-descriptions-item label="居住地：">
                <el-cascader v-model="model.homeaddress" size="medium" :options="areaOptions"></el-cascader>
            </el-descriptions-item>
            <!-- 地址 -->
            <el-descriptions-item label="地址：">
                <el-input v-model="model.address" size="medium" placeholder="地址"></el-input>
            </el-descriptions-item>
            <!-- 手机号码 -->
            <el-descriptions-item label="手机号码：">
                <el-input v-model="model.mobile" size="medium" maxlength="13" placeholder="手机号码"></el-input>
            </el-descriptions-item>
            <!-- 邮箱 -->
            <el-descriptions-item label="邮箱：">
                <el-input v-model="model.email" size="medium" type="email" placeholder="邮箱"></el-input>
            </el-descriptions-item>
            <!-- QQ -->
            <el-descriptions-item label="QQ 号码：">
                <el-input v-model="model.qq" size="medium" type="number" placeholder="QQ 号码"></el-input>
            </el-descriptions-item>
        </el-descriptions>
        <!-- 基本信息 -->
<!--        <el-divider content-position="left">-->
<!--            <div class="font-s16">-->
<!--                <icon name="contact"></icon>-->
<!--                <span class="ml-5 text-primary">编辑联系方式</span>-->
<!--            </div>-->
<!--        </el-divider>-->
<!--        <el-descriptions size="medium"-->
<!--                         label-class-name="detail-label"-->
<!--                         border-->
<!--                         :column="2">-->
<!--            &lt;!&ndash; 手机号码 &ndash;&gt;-->
<!--            <el-descriptions-item label="手机号码：">-->
<!--                <el-input v-model="model.mobile" size="medium" maxlength="13" placeholder="手机号码"></el-input>-->
<!--            </el-descriptions-item>-->
<!--            &lt;!&ndash; 邮箱 &ndash;&gt;-->
<!--            <el-descriptions-item label="邮箱：">-->
<!--                <el-input v-model="model.email" size="medium" type="email" placeholder="邮箱"></el-input>-->
<!--            </el-descriptions-item>-->
<!--            &lt;!&ndash; QQ &ndash;&gt;-->
<!--            <el-descriptions-item label="QQ 号码：">-->
<!--                <el-input v-model="model.qq" size="medium" type="number" placeholder="QQ 号码"></el-input>-->
<!--            </el-descriptions-item>-->
<!--        </el-descriptions>-->
        <!-- 求职意向 -->
        <el-divider content-position="left">
            <div class="font-s16">
                <icon name="job-intention"></icon>
                <span class="ml-5 text-primary">编辑求职意向</span>
            </div>
        </el-divider>
        <el-descriptions size="medium"
                         label-class-name="detail-label"
                         border
                         :column="1">
            <!-- 求职状态 -->
            <el-descriptions-item label="求职状态：">
                <el-select v-model="model.job_status" size="medium" placeholder="求职状态">
                    <el-option v-for="item in jobStatusOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <!-- 期望职位 -->
            <el-descriptions-item label="期望职位：">
                <el-cascader v-model="model.jobsort1" size="medium" :options="positionOptions"></el-cascader>
            </el-descriptions-item>
            <!-- 期望薪资 -->
            <el-descriptions-item label="期望薪资：">
                <div class="r-flex">
                    <div class="r-flex__item">
                        <el-select v-model="model.expectedsalary" size="medium" placeholder="期望薪资">
                            <el-option v-for="item in expectedSalaryOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <strong v-show="model.expectedsalary > 0"
                            class="ml-10 font-s16">元/月</strong>
                </div>
            </el-descriptions-item>
            <!-- 工作地区 -->
            <el-descriptions-item label="工作地区：">
                <el-input v-model="model.qq" size="medium" type="number" placeholder="QQ 号码"></el-input>
            </el-descriptions-item>
            <!-- 求职意向 -->
            <el-descriptions-item label="求职意向：">
                <el-input v-model="model.intentionjobs" size="medium" placeholder="求职意向"></el-input>
            </el-descriptions-item>
        </el-descriptions>

        <div class="mt-20 text-right">
            <el-button type="text" size="medium" @click="close">取消</el-button>
            <el-button type="primary"
                       size="medium"
                       native-type="submit"
                       :loading="saveLoading"
                       @click="submitForm">
                <icon name="save"></icon>
                保存
            </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Prop, Emit } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import functionMixin from '@/mixins/function'
import resumeOptionsMixin from '@/mixins/options'

import { toJson, loading, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/resume')

@Component
export default class Detail extends mixins(functionMixin, resumeOptionsMixin) {
  @Prop({ type: Object, default: { width: '1000px', visible: false } }) dialog!: any

  // Vuex
  @module.State resume!: any
  @module.Action update!: (payLoad: any) => Promise<any>


  // form 模型
  public model: any = {
    username: '',
    password: '',
    mobile: '',
    email: ''
  }

  private saveLoading: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.resume)
  }

  /**
   * 提交表单
   */
  private submitForm(): void | boolean {
    this.saveLoading = true
    this.update({ id: this.resume.id, index: this.dialog.index, params: this.model }).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      this.model = toJson(res.data.show) // 重新赋给 model
      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  @Emit()
  close(): void {
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .el {
        &-date {
            &-editor {
                &.el-input {
                    width: 100% !important;;
                }
            }
        }

        &-select,
        &-cascader{
            width: 100% !important;
        }
    }
}

::v-deep .detail {
    &-label {
        width: 100px !important;
        text-align: right;
    }
}
</style>
